<!--
 * @Descripttion: 图像裁剪组件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年7月24日17:05:43
 * @LastEditors:
 * @LastEditTime:
 * @other: 代码完全开源，欢迎参考，也欢迎PR
-->

<template>
	<div class="sc-cropper">
		<div class="sc-cropper__img">
			<img :src="src" ref="img" />
		</div>
		<div class="sc-cropper__preview">
			<h4>图像预览</h4>
			<div class="sc-cropper__preview__img" ref="preview"></div>
		</div>
	</div>
</template>

<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

export default {
	props: {
		src: { type: String, default: "" },
		compress: { type: Number, default: 1 },
		aspectRatio: { type: Number, default: NaN },
	},
	data() {
		return {
			crop: null,
		};
	},
	watch: {
		aspectRatio(val) {
			this.crop.setAspectRatio(val);
		},
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.crop = new Cropper(this.$refs.img, {
				viewMode: 2,
				dragMode: "move",
				responsive: false,
				aspectRatio: this.aspectRatio,
				preview: this.$refs.preview,
			});
		},
		setAspectRatio(aspectRatio) {
			this.crop.setAspectRatio(aspectRatio);
		},
		getCropData(cb, type = "image/jpeg") {
			cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress));
		},
		getCropBlob(cb, type = "image/jpeg") {
			this.crop.getCroppedCanvas().toBlob(
				(blob) => {
					cb(blob);
				},
				type,
				this.compress
			);
		},
		getCropFile(cb, fileName = "fileName.jpg", type = "image/jpeg") {
			this.crop.getCroppedCanvas().toBlob(
				(blob) => {
					let file = new File([blob], fileName, { type: type });
					cb(file);
				},
				type,
				this.compress
			);
		},
	},
};
</script>

<style scoped>
.sc-cropper {
	height: 300px;
}
.sc-cropper__img {
	height: 100%;
	width: 400px;
	float: left;
	background: #ebeef5;
}
.sc-cropper__img img {
	display: none;
}
.sc-cropper__preview {
	width: 120px;
	margin-left: 20px;
	float: left;
}
.sc-cropper__preview h4 {
	font-weight: normal;
	font-size: 12px;
	color: #999;
	margin-bottom: 20px;
}
.sc-cropper__preview__img {
	overflow: hidden;
	width: 120px;
	height: 120px;
	border: 1px solid #ebeef5;
}
</style>
